<template>
    <div class="div_box">
        <div class="header">
          <div>
            <el-form :inline="true" ref="refSearchForm" class="search-form" size="small">
              <el-form-item>
                <el-date-picker size="small" v-model="timeDevice1" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="开始日期" default-time="00:00:00" :picker-options="pickerOptions">
                </el-date-picker>
                <el-date-picker size="small" style="margin-left: 10px;" v-model="timeDevice2" type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束日期" default-time="23:59:59"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item size="small" class="search-button">
                <el-button size="small" @click="searchClick" class="el_button" :loading="loadingSearch">查询
                </el-button>
                <el-button class="el_button" size="small" @click="resetClick" :loading="loadingReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="content">
          <el-table :data="dataList" class="table" height="370" ref="refTable" row-key="id"
            :header-cell-style="headerStyle">
            <el-table-column align="center" label="序号" type="index" width="80" height="30">
            </el-table-column>
          
              <el-table-column align="center" prop="status" label="设备状态" show-overflow-tooltip>
                   <template slot-scope="{ row }">
                    <!-- 门磁 -->
                <div v-if="deviceInfo.deviceType == 'DoorMagnetism'">
                  <el-tag type="success" size="mini" v-if="row.status == 1"
                    >开门</el-tag
                  >
                  <el-tag type="danger" size="mini" v-else>关门</el-tag>
                </div>
                <!-- 红外 -->
                <div v-if="deviceInfo.deviceType == 'Infrared'">
                   <el-tag type="danger" size="mini" v-if="row.status == 1"
                    >有人</el-tag
                  >
                  <el-tag type="success" size="mini" v-else>无人</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="上报时间" show-overflow-tooltip>
            </el-table-column>
         
          </el-table>
          <pagination :page.sync="page" v-if="deviceInfo.deviceType == 'DoorMagnetism'" :limit.sync="limit" :total="total" @pagination="getDataList" class="pagination">
          </pagination>
  
          <pagination v-else :page.sync="page" :limit.sync="limit" :total="total" @pagination="InfraredDetectionPage" class="pagination">
          </pagination>
        </div>
    </div>
  </template>
  
  <script>
  import { reqDoorList, reqInfraredDetectionPage } from "@/api/api";
  import tableStyleMixin from "@mixin/table-style";
  import Pagination from "@components/Pagination.vue";
  import { mapState } from "vuex";
  export default {
    props: {
      deviceInfo: {
        type: Object,
        default: () => {},
      },
    },
    components: {
      Pagination,
    },
    mixins: [tableStyleMixin],
    data() {
      return {
        dialogVisible: false,
        page: 1,
        limit: 10,
        total: 0,
        dataList: [],
        loadingSearch: false, //查询按钮loading
        loadingReset: false, //重置按钮loading
        timeDevice1: "", //时间开始
        timeDevice2: "", //时间结束
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now(); // 选当前时间之后的时间
          },
        },
      };
    },
    computed: { ...mapState(["user"]) },
    watch: {
      // deviceInfo(val) {
      //     // console.log(val);
      //   this.page = 1;
      //   this.limit = 10;
      //   if (val.deviceType == "DoorMagnetism") {
      //     this.getDataList();
      //   } else if (val.deviceType == "Infrared") {
      //     this.InfraredDetectionPage();
      //   }
      // },
    },
    methods: {
        Info() {
        this.page = 1;
        this.limit = 10;
        if (this.deviceInfo.deviceType == "DoorMagnetism") {
          this.getDataList();
        } else if (this.deviceInfo.deviceType == "Infrared") {
          this.InfraredDetectionPage();
        }
      },
      // 查询
      async searchClick() {
        this.page = 1;
        this.limit = 10;
        if (this.deviceInfo.deviceType == "DoorMagnetism") {
          this.getDataList();
        } else if (this.deviceInfo.deviceType == "Infrared") {
          this.InfraredDetectionPage();
        }
      },
      // 重置
      async resetClick() {
        this.timeDevice1 = this.timeDevice2 = "";
        this.page = 1;
        this.limit = 10;
        if (this.deviceInfo.deviceType == "DoorMagnetism") {
          this.getDataList();
        } else if (this.deviceInfo.deviceType == "Infrared") {
          this.InfraredDetectionPage();
        }
      },
      // 门磁列表
      async getDataList() {
        if (this.timeDevice1 == null) {
          this.timeDevice1 = "";
        }
        if (this.timeDevice2 == null) {
          this.timeDevice2 = "";
        }
        let params = {
          imei: this.deviceInfo.imei,
          startTime: this.timeDevice1,
          endTime: this.timeDevice2,
          spaceId: this.deviceInfo.info=='11'?'': this.deviceInfo.spaceId,
        };
        const res = await reqDoorList(this.page, this.limit, params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.dataList = res.data.rows;
        this.total = res.data.total;
      },
      // 红外
      async InfraredDetectionPage() {
        if (this.timeDevice1 == null) {
          this.timeDevice1 = "";
        }
        if (this.timeDevice2 == null) {
          this.timeDevice2 = "";
        }
        let params = {
          imei: this.deviceInfo.imei,
          startTime: this.timeDevice1,
          endTime: this.timeDevice2,
          spaceId: this.deviceInfo.info=='11'?'': this.deviceInfo.spaceId,
        };
        const res = await reqInfraredDetectionPage(this.page, this.limit, params);
        // console.log(res);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.dataList = res.data.rows;
        this.total = res.data.total;
      },
      getInitDataList() {
        this.page = 1;
        this.limit = 10;
        this.getDataList();
      },
  
      // 点击关闭弹框
      closeDialog() {
        this.timeDevice1 = this.timeDevice2 = "";
        this.dataList = [];
        this.total = 0;
        this.page = 1;
        this.limit = 10;
        this.dialogVisible = false;
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  @import url("~@views/style/tablePage.less");
  .div_box {
      // height: calc(100vh - 170px);
      height: calc(100vh - 27vh);
      overflow: auto;
      width: 100%;
  }
  .header {
    display: flex;
    justify-content: space-between;
    .left {
      font-size: 15px;
      color: @primaryTxtcolor;
      margin-bottom: 20px;
      // display: flex;
      // justify-content: center;
      .label {
        margin: 10px 0px;
        .name {
          font-size: 16px;
        }
      }
    }
    .right {
      margin-right: 10px;
    }
  }

  .el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}
  </style>
  